<template>
  <div class="amount">
    <view class="amount_header">
      <view class="amount_header_title"
        :style="'padding-top:' + demoSize.top + 'px;' + 'height:' + demoSize.height + 'px;'">
        <image @click="onTapBack" class="amount_header_title_button" src="/static/tabs/blackback.png"
          mode="scaleToFit" />
        <view class="amount_header_title_nav">充值积分</view>
      </view>
      <view class="amount_header_person">
        <view class="amount_header_person_left">
          <image :src="userStore.userInfo?.logoImg" mode="aspectFill" />
          <text>{{ userStore.userInfo?.nickName }}</text>
        </view>
        <view class="amount_header_person_right">
          <!-- <image src="/static/tabs/fangdou.png" mode="scaleToFit" /> -->
          <text>积分 {{ userStore.userInfo?.punti }}</text>
        </view>
      </view>
    </view>
    <view class="amount_main">
      <view class="amount_main_amount">
        <view class="amount_main_amount_items" @click="handleChange(item)" :class="activeId == item.id ? 'active' : ''"
          v-for="(item, index) in rechargeList" :key="index">
          <view class="amount_main_amount_items_legumesnum">
            <!-- <image src="/static/tabs/fangdou.png" mode="scaleToFit" /> -->
            <text>{{ item.punti }}积分</text>
            <view>{{ item.remarks }}</view>
          </view>
          <view class="amount_main_amount_items_moneysnum">¥{{ item.payableAmount }}</view>
        </view>
      </view>
    </view>
    <view class="amount_amountbtn" @click="getpaly">
      ¥{{ activeAmount }}&nbsp;立即充值
    </view>
    <view class="amount_agreement" @click="getvipprotocol">充值即同意《国潮旅拍Ai充值协议》</view>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow, onReady } from "@dcloudio/uni-app"
import { useUserStore } from '@/stores'
import { GetAppletProdtceList, WxPay, GetOrderStatus, GetUserInfo } from '@/api/user'
const userStore = useUserStore()
const activeId = ref(1)
const activeAmount = ref()
const demoSize = reactive({ //胶囊位置
  top: 0,
  height: 0
})
const rechargeList = ref<any>([
])
onLoad(() => {
  // 获取小程序右上角胶囊位置信息
  const demo = uni.getMenuButtonBoundingClientRect()
  demoSize.top = demo.top
  demoSize.height = demo.height
  getList()
})
onReady(() => {
  uni.showShareMenu({
    withShareTicket: true, // 是否开启带 shareTicket 的分享
  });
});
const getList = async () => {
  let res: any = await GetAppletProdtceList()
  if (res.code == 0) {
    rechargeList.value = res.data
    activeAmount.value = res.data[0].actualAmount
  }
}
onShow(() => { })
const onTapBack = () => {
  uni.navigateBack({
    delta: 1 // 表示返回上一级页面，如果 delta 大于 1 则返回多级页面  
  });
}
const handleChange = (item: any) => {
  activeId.value = item.id
  activeAmount.value = item.actualAmount
}
const getpaly = async () => {
  let res: any = await WxPay({ ProductId: activeId.value })
  if (res.code == 0) {
    uni.requestPayment({
      provider: 'wxpay',
      orderInfo: {}, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
      timeStamp: res.data.timeStamp,
      nonceStr: res.data.nonceStr,
      package: res.data.package,
      signType: res.data.signType,
      paySign: res.data.signature,
      success: async function (paly) {
        let a: any = await GetOrderStatus({ orderno: res.data.orderNo })
        if (a.code == 0) {
          getUserInfo()
          uni.showToast({
            title: '支付成功',
            duration: 2000,
          })
        } else {

        }
      },
      fail: function (err) {
        console.log('fail:' + JSON.stringify(err));
      }
    });
  }
}
// 获取用户信息
const getUserInfo = async () => {
  const res: any = await GetUserInfo()
  // const { result } = res.data[0]
  userStore.userInfo.punti = res.data.punti
}
const getvipprotocol = () => {
  uni.navigateTo({
    url: '/pages/vipprotocol/index'
  })
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &_header {
    width: 100%;
    height: 456rpx;
    background: linear-gradient(180deg, #F5D0B6 0%, #FEE7D7 100%);
    backdrop-filter: blur(10px);

    &_title {
      display: flex;
      position: relative;
      align-items: center;
      width: 100%;

      &_nav {
        left: 50%;
        transform: translateX(-50%);
        font-weight: 500;
        font-size: 34rpx;
        width: 136rpx;
        position: absolute;
      }

      &_button {
        font-weight: 500;
        font-size: 34rpx;
        position: absolute;
        left: 34rpx;
        width: 18rpx;
        height: 35rpx;
      }
    }

    &_person {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 54rpx;

      &_left {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 60rpx;

        image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 12rpx;
        }

        text {
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
        }
      }

      &_right {
        display: flex;
        align-items: center;
        justify-content: center;
        //width: 188rpx;
        height: 72rpx;
        background: rgba(86, 63, 48, 0.1);
        border-radius: 36rpx;
        font-weight: 500;
        font-size: 30rpx;
        color: #563F30;
        margin-right: 60rpx;
        padding: 0 26rpx;

        image {
          width: 32rpx;
          height: 28rpx;
          margin-right: 12rpx;
        }
      }
    }
  }

  &_main {
    width: 100%;
    background-color: #fff;
    margin-top: -90rpx;
    padding-top: 76rpx;
    border-top-right-radius: 40rpx;
    border-top-left-radius: 40rpx;
    z-index: 9;

    &_amount {
      width: calc(100% - 64rpx);
      display: flex;
      flex-wrap: wrap;
      margin-top: 30rpx;
      margin: auto;

      &_items {
        width: 204rpx;
        height: 212rpx;
        background: #F7F7F7;
        border-radius: 24rpx;
        margin-right: 30rpx;
        margin-bottom: 36rpx;
        border-radius: 24rpx;
        border: 2rpx solid #fff;

        &_legumesnum {
          width: 100%;
          height: 160rpx;
          // display: flex;
          align-items: center;
          // justify-content: center;
          background-color: #F7F7F7;
          border-top-right-radius: 24rpx;
          border-top-left-radius: 24rpx;

          image {
            width: 32rpx;
            height: 28rpx;
            margin-right: 10rpx;
          }

          text {
            font-weight: 500;
            font-size: 36rpx;
            color: #563F30;
            width: 100%;
            display: block;
            text-align: center;
            padding-top: 30rpx;
          }

          view {
            text-align: center;
            margin-top: 15rpx;
            color: #563F30;
          }
        }

        &_moneysnum {
          width: 100%;
          height: 56rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 400;
          font-size: 28rpx;
          color: #563F30;
          background-color: #EAEAEA;
          border-bottom-right-radius: 24rpx;
          border-bottom-left-radius: 24rpx;
        }
      }

      .active {
        width: 204rpx;
        height: 212rpx;
        border: 2rpx solid #F7D3B9;

        .amount_main_amount_items_legumesnum {
          background-color: #FFF8EE;
        }

        .amount_main_amount_items_moneysnum {
          background-color: #F7D3B9;
        }
      }

      &_items:nth-child(3n) {
        margin-right: 0 !important;
      }
    }
  }

  &_amountbtn {
    width: calc(100% - 252rpx);
    height: 92rpx;
    background: #563F30;
    border-radius: 46rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFE1CD;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 308rpx;
  }

  &_agreement {
    text-align: center;
    font-weight: 400;
    font-size: 24rpx;
    color: #B5B5B5;
    position: absolute;
    bottom: 242rpx;
  }
}
</style>